<template>
  <el-dialog
    title="选择参数进行NRCT计算"
    :visible.sync="dialogVisible"
    width="1000px"
  >
    <div class="app-container">
      <el-form ref="ruleForm" inline :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
        <el-form-item label="起止时间" prop="created_at">
          <el-date-picker
            v-model="ruleForm.created_at"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="center"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">计算</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        :data="tableData"
        stripe
        style="width: 100%"
        :max-height="520"
      >
        <el-table-column
          prop="lng"
          label="经度"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="lat"
          label="纬度"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="X"
          label="X"
          align="center"
          sortable
          show-overflow-tooltip
        />
        <el-table-column
          prop="Y"
          label="Y"
          align="center"
          sortable
          show-overflow-tooltip
        />
        <el-table-column
          prop="distance"
          label="距离"
          align="center"
          sortable
        />
        <el-table-column
          prop="angle"
          label="角度"
          align="center"
          sortable
          show-overflow-tooltip
        />
        <el-table-column
          prop="NRCT"
          label="NRCT"
          align="center"
          sortable
          show-overflow-tooltip
        />
      </el-table>
      <div class="h12" />
      <el-button type="primary" @click="addOne">保存</el-button>
      <el-button type="success" @click="addLayer">数据处理</el-button>
    </div>
    <el-dialog
      title="输入名称"
      :visible.sync="dialogAddVisible"
      width="30%"
      append-to-body
    >
      <el-input v-model="postData.name" placeholder="名称" clearable />
      <div class="h12" />
      <el-button type="primary" @click="submit">提交</el-button>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { gcwd } from '@/api/util'
import { addOne } from '@/api/gridPartition'
export default {
  data() {
    return {
      dialogAddVisible: false,
      postData: {
        name: '',
        grid_type_id: '',
        data: null,
        datetimerange: null
      },
      dialogVisible: false,
      loading: false,
      ruleForm: {
        created_at: ['2021-05-29 11:45:00', '2021-05-29 14:28:00']
      },
      rules: {
        created_at: [
          { required: true, message: '请选择起止时间', trigger: 'blur' }
        ]
      },
      tableData: [],
      gridTypeId: null
    }
  },
  methods: {
    addLayer() {
      this.$emit('addLayer', this.tableData)
    },
    addOne() {
      this.dialogAddVisible = true
    },
    async submit() {
      this.postData.grid_type_id = this.gridTypeId
      this.postData.datetimerange = this.ruleForm.created_at
      this.postData.data = this.tableData
      if (!this.postData.name) {
        this.$message.error('请输入名称')
      }
      const { msg } = await addOne(this.postData)
      this.$message.success(msg)
      this.dialogAddVisible = false
      this.$emit('getPartitions')
    },
    async gcwd() {
      this.loading = true
      const params = {
        starttime: this.ruleForm.created_at[0],
        endtime: this.ruleForm.created_at[1]
      }
      const { data } = await gcwd(params)
      this.tableData = data.outputNrct
      this.loading = false
    },
    show(gridTypeId) {
      this.gridTypeId = gridTypeId
      this.dialogVisible = true
    },
    hide() {
      this.dialogVisible = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.gcwd()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.ruleForm = {
        created_at: []
      }
      this.tableData = []
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
